import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Table, Button,Row,Col,Layout, Breadcrumb,Menu,Dropdown,Popconfirm,Icon,Input} from 'antd';
import reqwest from 'reqwest';
import style from '../../styles/TableCss.less';
import {Link} from 'dva/router';
const {  Content, Footer } = Layout;
class Commodity extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data:[],
			dropDown:'所有商品',
			columns:[{
				title:'编码',
				dataIndex:'code',
			},{
				title:'商品名称',
				dataIndex:'comname',
			},{
				title:'分类',
				dataIndex:'type'
			},{
				title:'基本单位',
				dataIndex:'unit'
			},{
				title:'price',
				dataIndex:'price'
			},{
				title:'库存',
				dataIndex:'stock'
			},{
				title:'动作',
				key:'action',
				render:(text,record) =>(
					<span>
            <Link to={{pathname:'/app/newcomdity',query:{'current':this.props.location.current}}}>编辑{record.name}</Link>
            <span className="ant-divider" />
            <Popconfirm title="确认删除吗?" onConfirm={(e) => this.onDelete(record.key, e,this)}>
              <a>删除</a>
            </Popconfirm>
          </span>
				)
			}]
		}
	}
	onDelete(key,e,_this){
    const data = _this.state.data.filter(item => item.key !== key);
    _this.setState({data });
  }
  menuClick(e){
    console.log(e.item.props.value)
    this.setState({dropDown:e.item.props.value});
  }
  handleTableChange(pagination, filters, sorter){
    const pager = { ...this.state.pagination };
    // console.log(pagination.current)
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {}) {
    console.log('params:', params);
    let _data=[];
    
    this.setState({ loading: true });
    reqwest({
      url: window.host+'/api/clues',
      method: 'get',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        page:params.page,
      },
      type: 'json',
    }).then((data) => {
      console.log(data);
        const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
        pagination.total = 200;
        // debugger
        for(let i of data.results){
          _data.push({
            key:i.login.username,
            code:i.login.username,
            comname:i.name.title,
            type:i.phone,
            unit:i.location.city,
            price:i.gender,
            stock:1,
          })
      }
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    }).fail( (err, msg) =>{
       console.log(1)
    })
  }
  componentWillMount(){
    this.fetch({page:1});
    console.log(this.props.location.current)
  }
  onSelectChange (selectedRowKeys){
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
	render(){
		const { selectedRowKeys,data,pagination,loading,dropDown,columns } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
      onSelection: this.onSelection,
    };
      // <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">所有客户</a>
    const customerMemu=(
      <Menu onClick={this.menuClick.bind(this) } selectedKeys={[dropDown]}>
        <Menu.Item value='所有线索'>
          <a target="_blank" rel="noopener noreferrer">所有线索</a>
        </Menu.Item>
        <Menu.Item value='我的线索'>
          <a target="_blank" rel="noopener noreferrer" >我的线索</a>
        </Menu.Item>
        <Menu.Item value='aaaa'>
          <a target="_blank" rel="noopener noreferrer">aaaa</a>
        </Menu.Item>
      </Menu>
    )
		return(
      <Layout style={{background:'#fff',height:'100%'}}>
				 <Content >
          <Row type='flex'>
            <Col span={7} xl={{span:7}} xs={7} style={{padding:'24px 25px 0px'}}>
              <Breadcrumb style={{fontSize:14}}>
                <Breadcrumb.Item>商品管理</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
            <Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} style={{lineHeight:'60px',textAlign:'right'}}>
              <Button ><Link to={{pathname:'/app/newcomdity',query:{current:this.props.location.query.current}}}>新建商品</Link></Button>
            </Col>
          </Row>
          <Layout className={`${style.tb_serbor}`}>
            <Row type='flex' className={`${style.tb_ser}`}>
              <Col span={6}>
              
              </Col>
              <Col span={7} offset={11} style={{textAlign:'right'}}>
                <Input.Search 
                  placeholder="input search text"
                  style={{ width: 200 }}
                  onSearch={value => console.log(value)}
                 />
              </Col>
            </Row>
            <Table columns={columns}
              dataSource={data} onRowClick={this.handleRowClick}
              pagination={pagination}
              loading={loading}
              onChange={this.handleTableChange.bind(this)}
            />
          </Layout>
        </Content>
			</Layout>	
		)
	}
}
  // <Dropdown className={`${style.dropDown}`}  overlay={customerMemu} >
  //                 <a className={`${style.customerDown}`}>
  //                   {dropDown} <Icon type="down" />
  //                 </a>
  //               </Dropdown>
export default connect()(Commodity);